<template>
  <div>
    <!-- 选择素材 -->
    <a-modal v-model="visible" title="微信素材列表" :centered="true" width="1000px" @ok="handleOk" :destroyOnClose="true">
      <a-button type="primary" icon="plus" @click="addNew" style="margin-bottom:24px;">新增</a-button>
      <a-radio-group v-model="value" @change="onChange" size="large" style="width: 100%;">
        <a-list :grid="{ gutter: 16, column: 4 }" :data-source="data" :pagination="paginationProps" class="list">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-card hoverable class="xcx-card">
              <img slot="cover" :src="item.imgUrl" alt="" class="img-cover" @click="pickItem(item, index)" />
              <a-card-meta>
                <template slot="title">
                  <ellipsis :length="20" tooltip>{{ item.createTime }}</ellipsis>
                </template>
                <template slot="description">
                  {{ item.title }}
                </template>
              </a-card-meta>
              <template slot="actions" class="ant-card-actions">
                <a-icon key="edit" type="edit" @click="edit(item)" style="color:#1890FF" />
                <a-icon type="delete" theme="twoTone" two-tone-color="#eb2f96" @click="deleteRecord(item)" />
                <a-radio :value="item" ref="pickRadio"></a-radio>
              </template>
            </a-card>
          </a-list-item>
        </a-list>
      </a-radio-group>
    </a-modal>
    <!-- 编辑 -->
    <Edit ref="editModal" @refreshList="refreshList"></Edit>
  </div>
</template>
<script>
import Edit from './edit'
import { Ellipsis } from '../index'
import { getMaterialList } from '@/api/box/theme'

export default {
  components: {
    Edit,
    Ellipsis
  },
  data() {
    return {
      visible: false,
      paginationProps: {
        current: 1,
        pageSize: 8,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`,
        onChange: page => {
          this.fetchList(page)
        }
      },
      data: [],
      value: {}
    }
  },
  methods: {
    show() {
      this.visible = true
      this.fetchList(1)
    },
    fetchList(pageNo) {
      console.log
      this.paginationProps.current = pageNo
      let params = {
        page: {
          pageNo: pageNo,
          pageSize: this.paginationProps.pageSize
        }
      }
      getMaterialList(params).then(res => {
        if (res.code == 0) {
          this.data = res.data
          this.paginationProps.total = res.page.count
        } else {
          this.$message.warning(res.msg)
          this.data = []
          this.paginationProps.total = 0
        }
      })
    },
    handleEdit(record) {},
    refreshList() {
      this.fetchList(1)
    },
    addNew() {
      this.$refs.editModal.show('add')
    },
    edit(item) {
      this.$refs.editModal.show(item.id, item)
    },
    deleteRecord(item) {
      this.$message.warning('暂不可用！')
    },
    onChange() {},
    handleOk() {
      console.log(this.value)
      this.$emit('getChoose', this.value)
      this.visible = false
    },
    pickItem(item, index) {
      this.value = item
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  /deep/.ant-list-item {
    .ant-card-cover {
      height: 180px;
    }
    .ant-card-body {
      min-height: 170px;
    }
  }
}
/deep/.xcx-card {
  .ant-card-meta-title {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    font-weight: normal;
  }
  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
  }
}
.img-cover {
  height: 100%;
  width: 100%;
  object-fit: scale-down;
  border-bottom: 1px solid #e8e8e8;
  display: block;
}
// .edit {
//   color: #1890ff;
//   border-top: 1px solid #e8e8e8;
//   text-align: center;
//   line-height: 36px;
//   cursor: pointer;
// }
</style>

